<template>
	<view class="home-card">
		<view class="title">
			<view>祝福语</view>
			<view class="close" @click="close">+</view>
		</view>
		<view class="bannerbox">
			<view class="text-item">
				<textarea fixed adjust-position placeholder="请输入祝福语，你也可以从列表中选择。" v-model="textdata" />
				<button type="default" @click="retdata('qd')">确定</button>
			</view>
			<view class="box-item" v-for="(item,index) in resdata" :key='index' @click="retdata(item)">
				{{item}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		resdata
	} from '@/static/text/text.js'
	export default {
		name: "home-msg",
		props: ['text'],
		data() {
			return {
				resdata,
				textdata: ''
			};
		},
		created() {
			this.textdata = this.text
			console.log(resdata);
		},
		methods: {
			close() {
				this.$emit('close', false);
			},
			retdata(type) {
				if (type == 'qd') {
					if (!this.textdata) return uni.showToast({
						title: '未填写信息',
						icon: 'none'
					})
					this.$emit('retdata',this.textdata)
				}else{
					this.$emit('retdata',type)
				}
				this.$emit('close', false);
			}
		}
	}
</script>

<style>
	.box-item {
		padding: 20rpx;
		border-radius: 16rpx;
		background-color: #c9d8cd;
		margin: 20rpx 0;
	}

	.title {
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: 1px solid #eeeeee;
		text-align: center;
		font-weight: bold;
	}

	.home-card {
		position: absolute;
		bottom: 0;
		z-index: 111;
		width: 750rpx;
		height: 700rpx;
		background-color: #fefefe;
		border-radius: 30rpx 30rpx 0 0;
	}

	.bannerbox {
		margin: 20rpx;
		height: 620rpx;
		text-align: justify;
		display: flex;
		flex-direction: column;
		overflow-y: scroll;
	}

	.close {
		position: absolute;
		left: 700rpx;
		top: -6rpx;
		z-index: 1111;
		font-size: 50rpx;
		transform: rotate(45deg);
	}

	.text-item {
		display: flex;
	}

	button {
		width: 170rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 28rpx;
		margin-left: 20rpx;
	}

	textarea {
		width: 500rpx;
		padding: 10px;
		border: 1px solid #999999;
		border-radius: 8rpx;
	}
</style>
